import * as React from "react";
import "./global.less";
import PdfViewComponent from "./component/PDFViewer";
import PDFcontrol from "./component/PDFControl";
import SignWritePannel from "./component/SignWritePannel";
import { getUrlParam, isPC } from "../util/help";
import { useCloneSignCanvas, useDrawSignInCanvas, useEditPdf } from "./hooks/";

const { useState, useCallback, useRef, useEffect } = React;

function ProtocolPage() {
  const pdfFileRef = useRef<any>();
  const pdfViewerRef = useRef<any>();
  const isPdfEndLoadRef = useRef<boolean>(false);
  const [isPdfBeginLoad, pdfBeginLoaded] = useState(false);
  const [pdfCanvasNeedLoad, triggerCanvasLoad] = useState(0);
  const [curPdfCanvas, saveCurPdfCanvas] = useState<HTMLCanvasElement | null>(
    null
  );
  const [showSignWritePannelState, toggleShowSignWritePannel] = useState(false);
  // 添加渲染层
  const scale = useCloneSignCanvas(
    pdfCanvasNeedLoad,
    isPdfBeginLoad,
    isPdfEndLoadRef
  );
  const {
    addSignInCanvas,
    deleteSignInCanvas,
    updateSignList,
    uploadPdf,
    uploadSign,
    downloadPdf,
    saveSelectSign,
    signList,
    pdfReadBuffer,
    savePdfReadBuffer,
  } = useEditPdf(curPdfCanvas as HTMLCanvasElement, isPdfEndLoadRef);
  // 渲染层绘画
  useDrawSignInCanvas(
    curPdfCanvas as HTMLCanvasElement,
    signList,
    isPdfEndLoadRef
  );

  const showSignWritePannel = useCallback(() => {
    if (curPdfCanvas) {
      toggleShowSignWritePannel(true);
    }
  }, [curPdfCanvas]);

  const hideSignWritePannel = useCallback(() => {
    toggleShowSignWritePannel(false);
  }, []);

  useEffect(() => {
    const filePath = getUrlParam("file");

    //console.log(filePath)
    if (filePath) {
      fetch(filePath, { cache: "no-store" }).then(async (res) => {
        //savePdfReadBuffer(await res.arrayBuffer())
        uploadPdf({
          target: {
            files: [res],
          },
        });

        //const data = localStorage.getItem('ZDFMS_usersign')
        //const dataURL = "data:image/png;base64," + data;
        //addSignInCanvas(dataURL, 250, 80);
      });
    }
    //window.parent.postMessage('子页面向父页面发送消息','*');
  }, []);


  // window.parent.addEventListener("message", async function (event) {
  //   console.log(event)
  //   const data = event.data;
  //   if (data.type === "get_pdf") {

  //     await downloadPdf();

  //     window.parent.postMessage("pdf_ready", "*");
  //   }
  // });

  // window.parent.addEventListener("embedEvent", async function (event) {
   // console.log(event)
    // const data = event.data;
    // if (data.type === "get_pdf") {

    //   await downloadPdf();

    //   window.parent.postMessage("pdf_ready", "*");
    // }
  //});

  return (
    <div className={`${isPC ? "pcMode" : ""}`}>
      <div className="pdf-wrap">
        <PDFcontrol
          pdfViewerRef={pdfViewerRef}
          uploadPdf={uploadPdf}
          uploadSign={uploadSign}
          downloadPdf={downloadPdf}
          deleteSignInCanvas={deleteSignInCanvas}
          showSignWritePannel={showSignWritePannel}
        />
        <PdfViewComponent
          scale={scale}
          pdfFileRef={pdfFileRef}
          pdfViewerRef={pdfViewerRef}
          pdfReadBuffer={pdfReadBuffer as ArrayBuffer}
          signList={signList}
          curPdfCanvas={curPdfCanvas as HTMLCanvasElement}
          triggerCanvasLoad={triggerCanvasLoad}
          updateSignList={updateSignList}
          uploadPdf={uploadPdf}
          saveCurPdfCanvas={saveCurPdfCanvas}
          saveSelectSign={saveSelectSign}
          pdfBeginLoaded={pdfBeginLoaded}
        />
        <SignWritePannel
          showSignWritePannelState={showSignWritePannelState}
          hideSignWritePannel={hideSignWritePannel}
          addSignInCanvas={addSignInCanvas}
        />
      </div>
    </div>
  );
}
export default ProtocolPage;
